<template>
	<view>
		<view class="tabs">
			<up-sticky :customNavHeight="topHeight">
				<view>
					<up-tabs
						:list="tabs"
						@click="tabChange"
						activeStyle="#3c9cff"
						:scrollable="false"
						:current="selectTab"
					>
					</up-tabs>
				</view>
			</up-sticky>
			<view class="header2">
				<view class="left" v-if="tabType == 4">
					<scroll-view scroll-x="true" class="scroll-view">
						<view :class="[cType==1?'scroll-view-item-active':'scroll-view-item']" @click="handleClick(1)">
							<view>全部<text style="margin-left: 10rpx;">{{ allNum }}</text></view>
						</view>
						<view :class="[cType==2?'scroll-view-item-active':'scroll-view-item']" @click="handleClick(2)">
							<view>评论<text style="margin-left: 10rpx;">{{ commentNum }}</text></view>
						</view>
						<view :class="[cType==3?'scroll-view-item-active':'scroll-view-item']" @click="handleClick(3)">
							<view>点赞<text style="margin-left: 10rpx;">{{ thumbNum }}</text></view>
						</view>
					</scroll-view>
				</view>
				<view class="left" v-else>
					<scroll-view scroll-x="true" class="scroll-view">
						<view :class="[templeteType=='all'?'scroll-view-item-active':'scroll-view-item']" @click="handleClick2('all')">
							<view>全部日志</view>
						</view>
						<view v-for="(item,index) in templeteList" :class="[templeteType==index?'scroll-view-item-active':'scroll-view-item']" @click="handleClick2(index)">
							<view>{{item.templete_name}}</view>
						</view>
					</scroll-view>
				</view>
				<view v-show="showRead" class="right">
					<up-checkbox-group v-model="readCheckbox" @change="handleCheck">
						<up-checkbox shape="circle" label="只看未读"></up-checkbox>
					</up-checkbox-group>
				</view>
			</view>
		</view>
		<!--评论列表-->
		<scroll-view scroll-y="true" class="list-scroll" v-if="tabType == 4" @scrolltolower="handlePage">
			<view v-if="commentList && commentList.length > 0" v-for="(item,index) in commentList" :key="index">
				<!--分割线-->
				<view v-if="index > 0" class="divider-line divider-line-margin"></view>
				<view class="comment">
					<view class="comment-left">
						<image :src="item.img_url"></image>
					</view>
					<view class="comment-right">
						<view class="comment-header">
							<text>{{ item.worker_name }}</text>
							<text style="font-size: 26rpx;">{{ item.add_time }}</text>
						</view>
						<view v-if="item.busi_type == 3" style="padding: 10rpx 0;">
							<uni-icons type="hand-up-filled" size="20" color="#3f85ff"></uni-icons>
							<text style="color: #3f85ff;">点赞</text>
						</view>
						<view v-else style="color: #909399;padding: 10rpx 0;">{{ item.content }}</view>
						<view class="comment-log" @click="toDetail2(item)">
							<view class="comment-log-header">
								<text>{{item.add_name+'的'+item.templete_name}}</text>
								<text>{{item.log_add_time}}</text>
							</view>
							<view class="comment-log-content" v-for="c in JSON.parse(item.log_content)">
								<view v-if="c.field_type == 'quill'"><text>{{c.field_name}}:</text></view>
								<view v-if="c.field_type == 'quill' && c.field_content" v-html="c.field_content"></view>
								<view v-if="c.field_type == 'quill' && !c.field_content">-</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="log-empty">
				您还没有收到评论或赞
			</view>
			<view v-if="commentList && commentList.length > 0" style="padding-bottom: 5rpx;">
				<up-loadmore :status="loading" :nomore-text="nomoreText" color="#909399"/>
			</view>
		</scroll-view>
		<!--日志列表-->
		<scroll-view v-else scroll-y="true" class="list-scroll" @scrolltolower="handlePage" @scroll="handleScroll">
			<view v-if="tableData && tableData.length > 0" v-for="(item,index) in tableData" :key="index" >
				<view class="date-title">{{ item.dateTitle }}</view>
				<view v-for="(d,idx) in item.details" :key="index+idx" @click="toDetail(d)" id="myElementId">
					<!--分割线-->
					<view v-if="idx > 0" class="divider-line"></view>
					<!--日志头部-->
					<view class="log-header">
						<image :src="d.img_url"></image>
						<view style="width: 80vw;margin-left:15rpx">
							<view style="font-size: 30rpx;">{{ d.add_name+'的'+d.templete_name }}</view>
							<view style="font-size: 24rpx; color: #909399;">{{ d.add_time?d.add_time.substring(5):'' }}</view>
						</view>
						<view @click.stop="toMore(d)">
							<uni-icons color="#909399" type="more-filled" size="20"></uni-icons>
						</view>
					</view>
					<!--日志内容-->
					<view class="log-middle">
						<view style="overflow-wrap: anywhere;color: #636363;" v-for="c in JSON.parse(d.content)">
							<view v-if="c.field_type == 'quill'"><text>{{c.field_name}}:</text></view>
							<view v-if="c.field_type == 'quill' && c.field_content" v-html="c.field_content" style="color: #909399;"></view>
							<view v-if="c.field_type == 'quill' && !c.field_content">-</view>
							<view v-if="c.field_type == 'imageAndFile' && c.field_content.length > 0" style="display: flex;gap: 20rpx;">
								<view v-for="f in c.field_content">
									<image v-if="f.name.indexOf('.jpg')>0||f.name.indexOf('.jpeg')>0||f.name.indexOf('.png')>0" :src="f.url" style="width: 80rpx;height: 80rpx;border-radius: 5rpx;"></image>
								
									<image v-else-if="f.name.indexOf('.doc')>0" src="/static/fileType_big/word_b.png" style="width: 80rpx;height: 80rpx;"></image>
									<image v-else-if="f.name.indexOf('.xls')>0" src="/static/fileType_big/excel_b.png" style="width: 80rpx;height: 80rpx;"></image>
									<image v-else-if="f.name.indexOf('.ppt')>0" src="/static/fileType_big/ppt_b.png" style="width: 80rpx;height: 80rpx;"></image>
									<image v-else-if="f.name.indexOf('.pdf')>0" src="/static/fileType_big/pdf_b.png" style="width: 80rpx;height: 80rpx;"></image>
									<image v-else src="/static/fileType_big/txt_b.png" style="width: 80rpx;height: 80rpx;"></image>
								</view>
							</view>
						</view>
					</view>
					<!--已读 评论 点赞-->
					<view class="log-bottom">
						<view v-if="d.allRead" class="icon-btn">
							<uni-icons type="checkbox-filled" size="20"></uni-icons>
							<text>全部已读</text>
						</view>
						<view v-if="!d.allRead" class="icon-btn">
							<uni-icons type="circle" size="20"></uni-icons>
							<text>{{d.readNum}}人已读</text>
						</view>
						<view class="icon-btn">
							<uni-icons type="chatbubble" size="20"></uni-icons>
							<text>评论</text>
						</view>
						<view v-if="d.isThumb" class="icon-btn" @click.stop="doThumb(d, 0)">
							<uni-icons type="hand-up-filled" size="20" color="#3f85ff"></uni-icons>
							<text style="color: #3f85ff;">点赞</text>
						</view>
						<view v-if="!d.isThumb" class="icon-btn" @click.stop="doThumb(d, 1)">
							<uni-icons type="hand-up" size="20"></uni-icons>
							<text>点赞</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="log-empty">暂无数据</view>
			<view v-if="tableData && tableData.length > 0" style="padding-bottom: 5rpx;">
				<up-loadmore :status="loading" :nomore-text="nomoreText" color="#909399"/>
			</view>
		</scroll-view>
		<!--弹层-->
		<up-popup :show="showMore" :round="10" mode="center"  @close="closeMore">
			<view style="padding: 30rpx;width: 50vw;font-size: 28rpx;">
				<view style="margin-bottom: 30rpx;color: #909399;">查看{{logObject.add_name}}的所有日志</view>
				<view style="margin-bottom: 30rpx;color: #909399;">添加到</view>
				<view style="margin-bottom: 30rpx;color: #909399;">分享</view>
				<view style="margin-bottom: 30rpx;color: #909399;">删除</view>
				<view style="width: 100rpx;float: right;margin-bottom: 20rpx;">
					<up-button type="primary" :plain="true" text="取消" @tap="closeMore" :customStyle="{height:'30px'}"></up-button>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script>
	import { number } from 'echarts';
	import log from '@/apis/cloud/worklog';
	var _this;
	export default {
		name:'LookLog',
		props:{
			userInfo:Object,
			tabIndex:number,
			searchForm:Object,
		},
		data() {
			return {
				topHeight: 0,
				tabs: [
					{value:2,name:'我收到的'},
					{value:1,name:'我发出的'},
					{value:3,name:'我的团队'},
					{value:4,name:'评论点赞'}
				],
				tabType: 2,
				selectTab:0,
				showMore:false,
				logObject:{},
				showRead: true,
				readCheckbox:[],
				lookUnread:false,
				tableData: [],
				worklogList:[],
				templeteType:'all',//模板类型 all全部；t-001日报；
				templeteName:null,
				templeteList:[],
				cType:1,//评论类型 1全部2评论3点赞
				commentList: [],
				allNum:0,
				commentNum:0,
				thumbNum:0,
				pageNo:1,
				pageSize:5,
				total:0,
				loading:'',
				nomoreText:'没有更多了',
			}
		},
		created(){
			_this = this;
			let app = uni.getSystemInfoSync();
			_this.topHeight = app.statusBarHeight;
			//由写日志完成后，跳转到我发出的，然后只看未读逻辑处理
			if(_this.tabIndex == 1) {
				_this.showRead = false;
				_this.lookUnread = false;
				_this.tabType = 1;
				_this.selectTab = 1;
			}else {
				//处理搜索页面传参
				_this.selectTab = _this.searchForm.select_tab;
				if(_this.selectTab == 0) {
					_this.tabType = 2;
				}else if(_this.selectTab == 1) {
					_this.tabType = 1;
				}else if(_this.selectTab == 2) {
					_this.tabType = 3;
				}else if(_this.selectTab == 3) {
					_this.tabType = 4;
					_this.getComment();
				}
				_this.templeteName = _this.searchForm.templete_name;
				
			}
			if(_this.tabType != 4) {
				_this.getTemplete();
				_this.getList();
			}
		},
		methods: {
			async getTemplete() {
				const params = {
					add_phone: _this.userInfo.phone,
				}
				const res = await log.getTemplete(params);
				if(res.status > 0) {
					_this.templeteList = res.data;
				}
			},
			toDetail2(comment) {
				let log = {
					id:comment.log_id,
					add_id: comment.add_id,
					add_time: comment.log_add_time,
				};
				_this.toDetail(log);
			},
			toDetail(log) {
				if(_this.tabType == 2) {
					//我收到的，点击日志，更新已读状态
					_this.doRead(log);
				}
				//跳转详情页
				uni.navigateTo({
					url: "/pages/worklog/details",
					success: function (res) {
					  setTimeout(() => {
						res.eventChannel.emit('logDetails', { logObj: log,
							logList:_this.worklogList,
							userInfo:_this.userInfo,
							tabType:_this.tabType,
						});
					  }, 100);
					},
					fail() {
					 
					}
				});
			},
			async doRead(logObj) {
				const params = {
					log_id:logObj.id,
					people_id: _this.userInfo.worker_id,
					people_phone: _this.userInfo.phone,
				}
				const res = await log.doRead(params);
				if(res.status > 0) {
					//列表无动态刷新
					
					//发送日志待办消息
					
				}
			},
			toMore(log) {
				_this.logObject = log;
				_this.showMore = true;
				
			},
			closeMore() {
				_this.showMore = false;
			},
			async doThumb(logObj, type) {
				let thumb_type = 'other_thumb';
				if(_this.tabType == 1 || logObj.add_phone == _this.userInfo.phone) {
					thumb_type = 'my_thumb';
				}
				const params = {
					type: type,
					thumb_type: thumb_type,
					id: logObj.id,
					look_people: logObj.look_people,
					people_id: _this.userInfo.worker_id,
					people_phone: _this.userInfo.phone,
				};
				const res = await log.doThumb(params);
				if(res.status > 0) {
					_this.tableData.forEach(item=>{
						item.details.forEach(d=>{
							if(d.id == logObj.id) {
								if(type == 0) {
									d.isThumb = false;
								}else {
									d.isThumb = true;
								}
							}
						});
					});
				}
			},
			handleClick(type) {
				_this.cType = type;
				_this.commentList = [];
				_this.worklogList = [];
				_this.pageNo = 1;
				_this.getComment();
			},
			handleClick2(type) {
				_this.templeteType = type;
				if(type != 'all') {
					_this.templeteName = _this.templeteList[type].templete_name;
				}else {
					_this.templeteName = null;
				}
				_this.tableData = [];
				_this.pageNo = 1;
				_this.getList();
			},
			//滚动 处理分页
			handlePage(e) {
				_this.pageNo++;
				if((_this.pageNo-1)*_this.pageSize <= _this.total) {
					_this.nomoreText = '加载中...';
					if(_this.tabType == 4) {
						_this.getComment();
					}else {
						_this.getList();
					}
					
				}else {
					_this.loading = "nomore";
					_this.nomoreText = '没有更多了';
				}
			},
			//我收到的 滚动 处理已读
			handleScroll(e) {
				//我收到的
				if(_this.tabType == 2) {
					const query = uni.createSelectorQuery().in(this);
					query.selectAll('#myElementId').boundingClientRect(function(rects) {
						rects.forEach((rect, index) => {
							if (e.detail.scrollTop >= rect.top) {
								//console.log(`Element ${index + 1} is visible`);
								//console.log("0", _this.tableData);
								_this.tableData.forEach(item=>{
									item.details.forEach(d=>{
										if(!d.allRead) {
											let lookPeople = JSON.parse(d.look_people);
											if(d.readNum+1 == lookPeople.length) {
												d.allRead = true;
											}else {
												d.readNum += 1;
											}
											
											_this.doRead(d);
										}
									});
								});
							}
						});
					}).exec();
				}
			},
			//tab切换
			tabChange(e) {
				_this.pageNo = 1;
				_this.tabType = e.value;
				_this.selectTab = e.index;
				_this.templeteType = 'all';
				_this.templeteName = null;
				//显示只看未读
				if(e.value == 1 || e.value == 4) {
					_this.showRead = false;
					_this.lookUnread = false;
				}else {
					_this.showRead = true;
					_this.readCheckbox = [];
					_this.lookUnread = false;
				}
				//
				_this.worklogList = [];
				//查询列表
				if(e.value == 4) {
					// 查询评论列表
					_this.commentList = [];
					_this.getComment();
				}else {
					//查询日志列表
					_this.tableData = [];
					_this.getList();
				}
				
			},
			//查询日志列表
			async getList() {
				const params = {
					page:_this.pageNo,
					row:_this.pageSize,
					type:_this.tabType,
					add_phone:_this.userInfo.phone,
					look_unread:_this.lookUnread,
					templete_name:_this.templeteName,
					
					add_id: _this.searchForm.add_id,
					start_date: _this.searchForm.start_date,
					end_date: _this.searchForm.end_date,
				};
				const res = await log.getList(params);
				if(res.status > 0) {
					_this.total = res.count;
					_this.handleLog(res.data);
					//我收到的，且没有滚动条，处理已读
					if(_this.tabType == 2 && res.data.length < _this.pageSize) {
						//有待完善?????
						//目前主要实现滚动处理已读，见方法handleScroll
						_this.tableData.forEach(item=>{
							item.details.forEach(d=>{
								if(!d.allRead) {
									let lookPeople = JSON.parse(d.look_people);
									if(d.readNum+1 == lookPeople.length) {
										d.allRead = true;
									}else {
										d.readNum += 1;
									}
									
									_this.doRead(d);
								}
							});
						});
					}
				}
			},
			// 处理日志列表
			// 1.按时间分组
			// 2.
			handleLog(logList) {
				let dateArr = [];
				logList.forEach(log=>{
					dateArr.push(log.add_date);
					_this.worklogList.push(log);
				});
				//去重
				let set = new Set(dateArr);
				dateArr = Array.from(set);
				//重新组织列表数据
				dateArr.forEach(date=>{
					let details = [];
					let weekday = '';
					logList.forEach(log=>{
						if(date == log.add_date) {
							weekday = log.weekday;
							//已读 未读
							let read = JSON.parse(log.look_people);
							let readNum = 0;
							let allRead = false;
							read.forEach(r=>{
								if(r.status == 1) {
									readNum++;
								}
							});
							if(readNum == read.length){
								allRead = true;
							}
							log.readNum = readNum;
							log.allRead = allRead;
							//点赞
							let thumb = JSON.parse(log.thumbList);
							let isThumb = false;
							thumb.forEach(t=>{
								if(t.people_id == _this.userInfo.worker_id) {
									isThumb = true;
								}
							});
							log.isThumb = isThumb;
							//图片、附件合并
							let fieldList = JSON.parse(log.content);
							let attachList = [];
							fieldList.forEach(field=>{
								if(field.field_type == 'image' && field.field_content && field.field_content != '[]') {
									attachList.push(JSON.parse(field.field_content)[0]);
								}
								if(field.field_type == 'file' && field.field_content && field.field_content != '[]') {
									attachList.push(JSON.parse(field.field_content)[0]);
								}
							});
							fieldList.push({field_type:'imageAndFile',field_content:attachList});
							log.content = JSON.stringify(fieldList);
													
							details.push(log);
						}
					});
					//同样的时间，合并到一起
					if(_this.tableData && _this.tableData.length > 0) {
						let flag = false;
						_this.tableData.forEach(t=>{
							if(t.date == date) {
								details.forEach(d=>{
									t.details.push(d);
								});
								flag = true;
							}
						});
						if(!flag) {
							_this.tableData.push({date:date,dateTitle:date+' '+weekday,details:details});
						}
					}else {
						_this.tableData.push({date:date,dateTitle:date+' '+weekday,details:details});
					}
				})
			},
			//查询评论或赞列表
			async getComment() {
				const params = {
					page:_this.pageNo,
					row:_this.pageSize,
					type:_this.cType,
					people_phone:_this.userInfo.phone,
				};
				const res = await log.getComment(params);
				if(res.status > 0) {
					res.data.forEach(item=>{
						_this.commentList.push(item);
						_this.worklogList.push({id:item.log_id,add_id:item.add_id,add_time:item.log_add_time});
					});
					_this.allNum = res.count;
					_this.commentNum = res.count_comment;
					_this.thumbNum = res.count_thumb;
					
					if(_this.cType == 1) {
						_this.total = res.count;				 
					}else if(_this.cType == 2) {
						_this.total = res.count_comment;
					}else if(_this.cType == 3) {
						_this.total = res.count_thumb;
					}
				}
			},
			handleCheck(e) {
				if(e && e.length == 0) {
					_this.lookUnread = false;
				}else {
					_this.lookUnread = true;
				}
				_this.pageNo = 1;
				_this.worklogList = [];
				_this.tableData = [];
				_this.getList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		width: 99vw;
	}
	::v-deep .u-tabs__wrapper__nav__line {
		bottom: 6px;
	}
	.header2 {
		display: flex;
		flex-direction: row;
		padding: 0 20rpx;
		height: 60rpx;
		width: 99vw;
		align-items: center;
		margin-bottom: 15rpx;
		font-size: 28rpx;
		.left {
			width: 66vw;
			color: #606266;
			font-size: 28rpx;
			.scroll-view {
				white-space: nowrap;
				.scroll-view-item {
					display: inline-block;
					margin-right: 20rpx;
					border-radius: 5rpx;
					background-color: #f0f0f0;
					padding: 5rpx 10rpx;
					color: #909399;
				}
				.scroll-view-item-active {
					display: inline-block;
					margin-right: 20rpx;
					border-radius: 5rpx;
					background-color: #f0f0f0;
					padding: 5rpx 10rpx;
					color: #2c2c2c;
				}
			}
		}
		.right {
			display: flex;
			justify-content: flex-end;
			width: 29vw;
		}
	}	
	.list-scroll {
		height: 76vh;
		font-size: 28rpx;
		width: 99vw;
		.date-title {
			background-color: #f0f0f0;
			padding: 20rpx 40rpx;
			color: #909399;
		}
		.divider-line {
			border-bottom: 1px solid #e1e3e5;
			margin: 15rpx 0;
		}
		.divider-line-margin {
			margin: 30rpx 0;
		}
		.log-header {
			padding:20rpx 40rpx;
			display: flex;
			flex-direction: row;
			image {
				width: 66rpx;
				height: 66rpx;
				border-radius: 5rpx;
			}
		}
		.log-middle {
			padding: 0 40rpx;
			width: 93vw;
		}
		.log-bottom {
			color: #5E6C8F;
			display: flex;
			flex-direction: row;
			align-items: center; 
			font-size: 28rpx;
			padding: 0 35rpx;
			margin-bottom: 30rpx;
			.icon-btn {
				display: flex;
				flex-direction: row;
				margin-right: 20rpx;
				justify-content: center;
			}
		}
		.log-empty {
			//background-color: #f0f0f0; 
			color: #909399;
			height: 76vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.comment {
			width: 99vw; 
			display: flex;
			flex-direction: row;
			padding: 0 20rpx;
			.comment-left {
				margin-right: 20rpx;
				image {
					width: 66rpx;
					height: 66rpx;
					border-radius: 5rpx;
				}
			}
			.comment-right {
				width: 82vw;
				.comment-header {
					color: #636363; 
					display: flex;
					justify-content: space-between;
				}
				.comment-log {
					background-color: #f0f0f0;
					border-radius: 10rpx;
					padding: 10rpx;
					font-size: 24rpx;
					.comment-log-header {
						color: #909399; 
						display: flex;
						justify-content: space-between;
						margin-bottom: 10rpx;
					}
					.comment-log-content {
						overflow-wrap: anywhere;
						color: #909399;
					}
				}
			}
		}
		.click-color {
			background-color: #f0f0f0;
		}
	}
</style>
